<template>
	<view>
		<view>
			<input type="safe-password" class="uni-input border-0" placeholder="输入新密码" v-model="pass" />
			<input type="safe-password" class="uni-input border-0" placeholder="再次输入密码" v-model="repass" />
		</view>

		<view class="text-light-muted font-sm">密码规则：由字母、数字、特殊字符，任意2种组成，1-9位</view>
		<button class="text-light bg-main-disabled mt-3" :class="istrue ? 'bg-main' : ''" @click="submit">提交</button>
		<u-popup v-model="show" mode="center">
			<view class="px-2" style="width: 680rpx">
				<view class="flex flex-column justify-center">
					<view class="border-bottom flex align-center">
						<view class="pr-1">+86</view>
						<input type="text" class="border-bottom flex-1" v-model="phone" style="height: 80rpx" placeholder="手机号" />
					</view>

					<view class="border-bottom flex align-center mt-2">
						<input class="flex-1" type="text" style="height: 80rpx" v-model="yzm" placeholder="请输入验证码" />
						<view
							class="flex justify-center align-center font-sm bg-main-disabled text-white"
							style="width: 150rpx; height: 50rpx"
							:style="time > 0 ? { backgroundColor: '#F87F97!important' } : ''"
							:class="disable ? 'bg-main' : ''"
							@click="getyzm"
						>
							{{ time > 0 ? time : '获取验证码' }}
						</view>
					</view>

					<view class="flex align-center justify-center pb-3">
						<button class="text-light bg-main-disabled mt-3" :class="istrue ? 'bg-main' : ''" @click="updata">确认修改</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getcode } from '@/request/Api/login.js';
import { updateOrForgetPassword } from '@/request/Api/user.js';
export default {
	data() {
		return {
			pass: '',
			repass: '',
			show: false,
			phone: '',
			yzm: '',
			time: 0,
			userPhone: 0
		};
	},
	onLoad() {
		const userinfo = uni.getStorageSync('userInfo');
		this.userPhone = userinfo.phone;
	},
	methods: {
		checkPhone() {
			let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

			if (reg.test(this.phone)) {
				return true;
			}
			return false;
		},
		chek() {
			let reg = /^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{1,9}$/;
			if (reg.test(this.pass)) {
				return (this.pass !== '' && this.repass !== '' && this.pass === this.repass) || (this.phone !== '' && this.yzm !== '');
			}
		},
		submit() {
			if (this.chek()) {
				this.show = true;
			}
		},
		updata() {
			const data = {
				username: this.phone,
				code: this.yzm,
				password: this.pass
			};
			updateOrForgetPassword(data).then((res) => {
				if (res.code === 1) {
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						mask: true
					});
					this.show = false;
					this.pass = '';
					this.repass = '';
					this.phone = '';
					this.yzm = '';
				}
				else{
					uni.showToast({
						title: '验证码错误',
						icon: 'none',
						mask: true
					});
				}
			});
		},
		getyzm() {
			
			if (this.time > 0) {
				return;
			}
			if (this.checkPhone()) {

			
				uni.showLoading({
					title: '请稍后',
					mask: true
				});
				getcode({ phone: this.phone }).then((res) => {
					console.log(res);
					uni.hideLoading();
					if (res.code === 1) {
						uni.showToast({
							title: '验证码已经发送',
							icon: 'none',
							mask: true
						});
						this.time = 60;
						let timer = setInterval(() => {
							this.time--;
							if (this.time <= 0) {
								clearInterval(timer);
							}
						}, 1000);
					} else {
						uni.showToast({
							title: '请勿频繁发送验证码',
							icon: 'none',
							mask: true
						});
					}
				});
			}
		}
	},
	computed: {
		disable() {
			return this.checkPhone();
		},
		istrue() {
			return this.chek();
		}
	}
};
</script>

<style></style>
